<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API网关管理后台</title>
    
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Element Plus 图标 -->
    <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
    
    <style>
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }
        
        .layout-container {
            height: 100vh;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
        }
        
        .aside {
            background: #304156;
        }
        
        .aside .el-menu {
            border-right: none;
        }
        
        .main {
            padding: 20px;
            background: #f5f7fa;
            overflow-y: auto;
        }
        
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .content-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .text-success {
            color: #67C23A;
            font-weight: 500;
        }
        
        .text-warning {
            color: #E6A23C;
            font-weight: 500;
        }
        
        .text-danger {
            color: #F56C6C;
            font-weight: 500;
        }
        
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: bold;
            color: #409eff;
            margin: 10px 0;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .table-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .status-active {
            background: #f0f9ff;
            color: #0369a1;
            border: 1px solid #bae6fd;
        }
        
        .status-inactive {
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }
        
        .status-expired {
            background: #fffbeb;
            color: #d97706;
            border: 1px solid #fed7aa;
        }
        
        /* 监控仪表盘样式 */
        .monitoring-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 16px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .time-controls {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        
        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #333;
        }
        
        .chart-box {
            width: 100%;
            height: 300px;
        }
        
        .alert-section {
            background: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .alert-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            color: #e74c3c;
        }
        
        .alert-item {
            display: inline-block;
            margin: 4px 8px 4px 0;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .alert-critical {
            background: #fee;
            color: #c53030;
            border: 1px solid #fc8181;
        }
        
        .alert-warning {
            background: #fffaf0;
            color: #d69e2e;
            border: 1px solid #f6ad55;
        }
        
        .instances-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
            margin-top: 20px;
        }
        
        .instance-card {
            background: white;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-left: 4px solid #e0e0e0;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .instance-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .instance-card.healthy {
            border-left-color: #4caf50;
        }
        
        .instance-card.warning {
            border-left-color: #ff9800;
        }
        
        .instance-card.critical {
            border-left-color: #f44336;
        }
        
        .instance-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .instance-name {
            font-weight: 600;
            font-size: 14px;
            color: #333;
        }

        /* 表格样式优化 */
        .el-table {
            border-radius: 8px;
            overflow: hidden;
            font-size: 14px;
        }

        .el-table .el-table__header-wrapper .el-table__header {
            background-color: #f8f9fa;
        }

        .el-table .el-table__header th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #333;
            font-size: 13px;
        }

        .el-table .el-table__body-wrapper .el-table__row:hover > td {
            background-color: #f7f9fc;
        }

        /* 表格内容对齐优化 */
        .el-table .cell {
            padding: 0 8px;
        }

        /* 数字列右对齐 */
        .el-table th:nth-child(7) .cell,
        .el-table th:nth-child(8) .cell,
        .el-table th:nth-child(9) .cell,
        .el-table td:nth-child(7) .cell,
        .el-table td:nth-child(8) .cell,
        .el-table td:nth-child(9) .cell {
            text-align: right;
            justify-content: flex-end;
        }

        /* 业务ID列左对齐并使用等宽字体 */
        .el-table td:nth-child(4) .cell {
            text-align: left;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
        }

        /* API标识符列左对齐并使用等宽字体 */
        .el-table td:nth-child(2) .cell {
            text-align: left;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: 12px;
        }
        
        .instance-status {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        
        .status-healthy {
            background-color: #4caf50;
        }
        
        .status-warning {
            background-color: #ff9800;
        }
        
        .status-critical {
            background-color: #f44336;
        }
        
        .instance-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .metric-item {
            font-size: 12px;
        }
        
        .metric-label {
            color: #666;
            display: block;
        }
        
        .metric-value {
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }
        
        .metric-value.success {
            color: #4caf50;
        }
        
        .metric-value.warning {
            color: #ff9800;
        }
        
        .metric-value.critical {
            color: #f44336;
        }
        
        .instance-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
        }
        
        .action-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .action-btn.primary {
            background: #409eff;
            color: white;
        }
        
        .action-btn.primary:hover {
            background: #337ab7;
        }
        
        .auto-refresh-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #666;
        }
        
        .refresh-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4caf50;
            animation: pulse 2s infinite;
        }
        
        .refresh-dot.paused {
            background: #ccc;
            animation: none;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container class="layout-container">
            <!-- 顶部导航 -->
            <el-header class="header" height="60px">
                <div class="logo">
                    <el-icon><Monitor /></el-icon>
                    API网关管理后台
                </div>
                <div>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            管理员
                            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人设置</el-dropdown-item>
                                <el-dropdown-item divided>退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            
            <el-container>
                <!-- 侧边栏 -->
                <el-aside class="aside" width="200px">
                    <el-menu
                        :default-active="activeMenu"
                        background-color="#304156"
                        text-color="#bfcbd9"
                        active-text-color="#409eff"
                        @select="handleMenuSelect">
                        <el-menu-item index="dashboard">
                            <el-icon><DataAnalysis /></el-icon>
                            <span>仪表盘</span>
                        </el-menu-item>
                        <el-menu-item index="projects">
                            <el-icon><Folder /></el-icon>
                            <span>项目管理</span>
                        </el-menu-item>
                        <el-menu-item index="apikeys">
                            <el-icon><Key /></el-icon>
                            <span>API Key管理</span>
                        </el-menu-item>
                        <el-menu-item index="instances">
                            <el-icon><Connection /></el-icon>
                            <span>API实例管理</span>
                        </el-menu-item>
                        <el-menu-item index="monitoring">
                            <el-icon><Monitor /></el-icon>
                            <span>实例监控</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                
                <!-- 主内容区 -->
                <el-main class="main">
                    <!-- 仪表盘 -->
                    <div v-if="activeMenu === 'dashboard'" :key="'dashboard-' + activeMenu">
                        <div class="page-header">
                            <h2>仪表盘</h2>
                            <p>系统整体运行状况概览</p>
                        </div>
                        
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-value">{{ stats.totalProjects }}</div>
                                <div class="stat-label">总项目数</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">{{ stats.totalApiKeys }}</div>
                                <div class="stat-label">活跃API Key</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">{{ stats.totalInstances }}</div>
                                <div class="stat-label">API实例数</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 项目管理 -->
                    <div v-if="activeMenu === 'projects'" :key="'projects-' + activeMenu">
                        <div class="page-header">
                            <h2>项目管理</h2>
                            <p>管理所有API项目</p>
                        </div>
                        
                        <div class="content-card">
                            <div class="table-toolbar">
                                <div>
                                    <el-input
                                        v-model="projectSearch"
                                        placeholder="搜索项目名称"
                                        style="width: 300px"
                                        clearable>
                                        <template #prefix>
                                            <el-icon><Search /></el-icon>
                                        </template>
                                    </el-input>
                                </div>
                                <div>
                                    <el-button type="primary" @click="refreshProjects">
                                        <el-icon><Refresh /></el-icon>
                                        刷新
                                    </el-button>
                                </div>
                            </div>
                            
                            <el-table :data="filteredProjects" style="width: 100%" v-loading="projectLoading" stripe>
                                <el-table-column prop="name" label="项目名称" min-width="150"></el-table-column>
                                <el-table-column prop="description" label="描述" min-width="200"></el-table-column>
                                <el-table-column prop="status" label="状态" min-width="100">
                                    <template #default="scope">
                                        <span :class="'status-tag status-' + scope.row.status.toLowerCase()">
                                            {{ scope.row.status }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createdAt" label="创建时间" min-width="160">
                                    <template #default="scope">
                                        {{ formatDisplayDateTime(scope.row.createdAt) }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="150" fixed="right">
                                    <template #default="scope">
                                        <el-button size="small" @click="viewProject(scope.row)">详情</el-button>
                                        <el-popconfirm
                                            title="确定删除此项目吗？"
                                            @confirm="deleteProject(scope.row.id)">
                                            <template #reference>
                                                <el-button size="small" type="danger">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    
                    <!-- API Key管理 -->
                    <div v-if="activeMenu === 'apikeys'" :key="'apikeys-' + activeMenu">
                        <div class="page-header">
                            <h2>API Key管理</h2>
                            <p>管理系统中的所有API Key</p>
                        </div>
                        
                        <div class="content-card">
                            <div class="table-toolbar">
                                <div>
                                    <el-button type="primary" @click="showCreateApiKeyDialog">
                                        <el-icon><Plus /></el-icon>
                                        生成API Key
                                    </el-button>
                                </div>
                                <div>
                                    <el-button @click="refreshApiKeys">
                                        <el-icon><Refresh /></el-icon>
                                        刷新
                                    </el-button>
                                </div>
                            </div>
                            
                            <el-table :data="apiKeys" style="width: 100%" v-loading="apiKeyLoading" stripe>
                                <el-table-column prop="description" label="描述" min-width="150"></el-table-column>
                                <el-table-column prop="apiKeyValue" label="Key值" min-width="350">
                                    <template #default="scope">
                                        <span style="font-family: monospace;">{{ scope.row.apiKeyValue }}</span>
                                        <el-button size="small" text @click="copyApiKey(scope.row.apiKeyValue)" style="margin-left: 8px;">
                                            <el-icon><CopyDocument /></el-icon>
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="状态" min-width="100">
                                    <template #default="scope">
                                        <el-tag :type="getApiKeyStatusType(scope.row.status)">
                                            {{ scope.row.status }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="expiresAt" label="过期时间" min-width="160">
                                    <template #default="scope">
                                        {{ formatDisplayDateTime(scope.row.expiresAt) || '永不过期' }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="200" fixed="right">
                                    <template #default="scope">
                                        <el-button size="small" @click="editApiKey(scope.row)">编辑</el-button>
                                        <el-button size="small" type="warning" @click="toggleApiKeyStatus(scope.row)">
                                            {{ scope.row.status === 'ACTIVE' ? '撤销' : '启用' }}
                                        </el-button>
                                        <el-popconfirm
                                            title="确定删除此API Key吗？"
                                            @confirm="deleteApiKey(scope.row.id)">
                                            <template #reference>
                                                <el-button size="small" type="danger">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    
                    <!-- API实例管理 -->
                    <div v-if="activeMenu === 'instances'" :key="'instances-' + activeMenu">
                        <div class="page-header">
                            <h2>API实例管理</h2>
                            <p>查看和管理所有API实例</p>
                        </div>
                        
                        <div class="content-card">
                            <div class="table-toolbar">
                                <div>
                                    <el-select 
                                        v-model="instanceSearchForm.projectId" 
                                        placeholder="选择项目" 
                                        clearable 
                                        style="width: 200px"
                                        @change="loadInstances"
                                        :loading="projectListLoading">
                                        <el-option
                                            v-for="project in projectList"
                                            :key="project.id"
                                            :label="project.name"
                                            :value="project.id">
                                        </el-option>
                                    </el-select>
                                    <el-select v-model="instanceSearchForm.status" placeholder="选择状态" clearable style="width: 150px; margin-left: 10px"
                                        @change="loadInstances">
                                        <el-option label="ACTIVE" value="ACTIVE"></el-option>
                                        <el-option label="INACTIVE" value="INACTIVE"></el-option>
                                        <el-option label="DEPRECATED" value="DEPRECATED"></el-option>
                                    </el-select>
                                </div>
                                <div>
                                    <el-button @click="refreshInstances">
                                        <el-icon><Refresh /></el-icon>
                                        刷新
                                    </el-button>
                                </div>
                            </div>
                            
                            <el-table :data="filteredInstances" style="width: 100%" v-loading="instanceLoading" stripe>
                                <el-table-column prop="projectName" label="项目名称" min-width="150"></el-table-column>
                                <el-table-column prop="businessId" label="业务ID" min-width="200"></el-table-column>
                                <el-table-column prop="apiType" label="API类型" min-width="120"></el-table-column>
                                <el-table-column prop="apiIdentifier" label="API标识" min-width="120"></el-table-column>
                                <el-table-column prop="status" label="状态" min-width="100">
                                    <template #default="scope">
                                        <el-tag :type="getInstanceStatusType(scope.row.status)">
                                            {{ scope.row.status }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" min-width="80" fixed="right">
                                    <template #default="scope">
                                        <el-button size="small" @click="viewInstance(scope.row)">详情</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                    <!-- 实例观测 -->
                    <div v-if="activeMenu === 'monitoring'" :key="'monitoring-' + activeMenu">
                        <div class="page-header">
                            <h2>实例观测</h2>
                            <p>API实例的实时状态观测和监控</p>
                        </div>
                        
                        <!-- 时间窗口和过滤控制区域 -->
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                            <div style="display: flex; align-items: center; gap: 16px;">
                                <!-- 时间窗口选择器 -->
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <span style="font-size: 14px; color: #666;">时间窗口:</span>
                                    <el-radio-group v-model="observationFilter.timeWindow" @change="loadObservationData" size="small">
                                        <el-radio-button label="1m">1分钟</el-radio-button>
                                        <el-radio-button label="10m">10分钟</el-radio-button>
                                        <el-radio-button label="30m">30分钟</el-radio-button>
                                        <el-radio-button label="1h">1小时</el-radio-button>
                                        <el-radio-button label="6h">6小时</el-radio-button>
                                        <el-radio-button label="24h">24小时</el-radio-button>
                                    </el-radio-group>
                                </div>
                                
                                <!-- 项目过滤 -->
                                <el-select v-model="observationFilter.projectId" placeholder="选择项目" clearable style="width: 160px;" @change="loadObservationData">
                                    <el-option v-for="project in projects" :key="project.id" 
                                             :label="project.name" :value="project.id"></el-option>
                                </el-select>
                            </div>
                            
                            <div style="display: flex; align-items: center; gap: 16px;">
                                <div class="auto-refresh-indicator">
                                    <span class="refresh-dot" :class="{ paused: autoRefreshPaused }"></span>
                                    <span>{{ autoRefreshPaused ? '已暂停' : '自动刷新' }}</span>
                                </div>
                                <el-button @click="toggleAutoRefresh" type="text">
                                    {{ autoRefreshPaused ? '启动' : '暂停' }}
                                </el-button>
                                <el-button type="primary" @click="refreshObservationData" :loading="observationLoading">
                                    <el-icon><Refresh /></el-icon>
                                    刷新
                                </el-button>
                            </div>
                        </div>
                        
                        <!-- 核心指标概览 -->
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-value">{{ observationOverview.totalInstances || 0 }}</div>
                                <div class="stat-label">总实例数</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">{{ observationOverview.healthyInstances || 0 }}</div>
                                <div class="stat-label">健康实例</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">{{ observationOverview.activeInstances || 0 }}</div>
                                <div class="stat-label">活跃实例</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">{{ observationOverview.faultyInstances || 0 }}</div>
                                <div class="stat-label">异常实例</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">{{ formatNumber(observationOverview.totalCallCount) }}</div>
                                <div class="stat-label">总调用量</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-value">{{ formatPercentage(observationOverview.averageSuccessRate) }}</div>
                                <div class="stat-label">平均成功率</div>
                            </div>
                        </div>
                        
                        <!-- 实例状态表格 -->
                        <div class="content-card">
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                                <h3 style="margin: 0; font-size: 16px; font-weight: 600;">实例状态列表</h3>
                                <div style="display: flex; gap: 10px;">
                                    <el-select v-model="observationFilter.instanceStatus" placeholder="实例状态" clearable size="small" style="width: 120px;" @change="loadObservationData">
                                        <el-option label="活跃" value="ACTIVE"></el-option>
                                        <el-option label="非活跃" value="INACTIVE"></el-option>
                                        <el-option label="已弃用" value="DEPRECATED"></el-option>
                                    </el-select>
                                    <el-select v-model="observationFilter.gatewayStatus" placeholder="网关状态" clearable size="small" style="width: 120px;" @change="loadObservationData">
                                        <el-option label="健康" value="HEALTHY"></el-option>
                                        <el-option label="降级" value="DEGRADED"></el-option>
                                        <el-option label="故障" value="FAULTY"></el-option>
                                        <el-option label="熔断" value="CIRCUIT_BREAKER_OPEN"></el-option>
                                    </el-select>
                                </div>
                            </div>
                            
                            <el-table :data="observationInstances" v-loading="observationLoading" style="width: 100%" stripe>
                                <el-table-column prop="projectName" label="项目名称" width="120" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="apiIdentifier" label="API标识符" width="140" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="apiType" label="API类型" width="100"></el-table-column>
                                <el-table-column prop="businessId" label="业务ID" min-width="160" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="instanceStatus" label="实例状态" width="100">
                                    <template #default="scope">
                                        <el-tag :type="getInstanceStatusTagType(scope.row.instanceStatus)" size="small">
                                            {{ getInstanceStatusText(scope.row.instanceStatus) }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="gatewayStatus" label="网关状态" width="100">
                                    <template #default="scope">
                                        <el-tag :type="getGatewayStatusTagType(scope.row.gatewayStatus)" size="small">
                                            {{ getGatewayStatusText(scope.row.gatewayStatus) }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="callCount" label="调用量" width="100" sortable>
                                    <template #default="scope">
                                        {{ formatNumber(scope.row.callCount) }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="successRate" label="成功率" width="100" sortable>
                                    <template #default="scope">
                                        <span :style="{ color: getSuccessRateColor(scope.row.successRate) }">
                                            {{ formatPercentage(scope.row.successRate) }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="averageLatency" label="平均延迟" width="100" sortable>
                                    <template #default="scope">
                                        <span :style="{ color: getLatencyColor(scope.row.averageLatency) }">
                                            {{ formatLatency(scope.row.averageLatency) }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="lastActiveTime" label="最后活跃时间" width="160">
                                    <template #default="scope">
                                        {{ formatLastActiveTime(scope.row.lastActiveTime) }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                </el-main>
            </el-container>
        </el-container>
        
        <!-- API Key创建对话框 -->
        <el-dialog v-model="createApiKeyDialogVisible" title="生成API Key" width="500px">
            <el-form :model="newApiKey" label-width="100px">
                <el-form-item label="描述">
                    <el-input v-model="newApiKey.description" placeholder="请输入API Key描述"></el-input>
                </el-form-item>
                <el-form-item label="过期时间">
                    <el-date-picker
                        v-model="newApiKey.expiresAt"
                        type="datetime"
                        placeholder="不选择则永不过期"
                        style="width: 100%"
                        clearable>
                    </el-date-picker>
                    <div style="font-size: 12px; color: #999; margin-top: 4px;">
                        不设置过期时间将生成永不过期的API Key
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="createApiKeyDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="createApiKey">生成</el-button>
                </span>
            </template>
        </el-dialog>
        
        <!-- API Key编辑对话框 -->
        <el-dialog v-model="editApiKeyDialogVisible" title="编辑API Key" width="500px">
            <el-form :model="editingApiKey" label-width="100px">
                <el-form-item label="API Key">
                    <el-input v-model="editingApiKey.apiKeyValue" readonly style="font-family: monospace;"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="editingApiKey.description" placeholder="请输入API Key描述"></el-input>
                </el-form-item>
                <el-form-item label="过期时间">
                    <el-date-picker
                        v-model="editingApiKey.expiresAt"
                        type="datetime"
                        placeholder="不选择则永不过期"
                        style="width: 100%"
                        clearable>
                    </el-date-picker>
                    <div style="font-size: 12px; color: #999; margin-top: 4px;">
                        不设置过期时间将保持永不过期
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editApiKeyDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateApiKey">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus 图标 -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.min.js"></script>
    <!-- axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- ECharts -->
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
    
    <script src="app.js"></script>
</body>
</html>